import React, { Component } from 'react';
import { Dimensions, View, Alert } from 'react-native';

import ImgButton from './ImgButton'

export default class ImgPanel extends Component {
    render() {
        let { height, width } = Dimensions.get('window')
        var list = []
        this.props.buttonlist.forEach((vnode, index) => {
            list.push(
                <ImgButton onButtonPass={this.onPassforIndex.bind(this)} key={index} img={vnode.img} text={vnode.text} index={index}></ImgButton>
            )
        });
        return (
            <View style={{ width: width, height: (width / 5 + 50) * 2, flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'space-around' }}>
                {list}
            </View>
        )
    }
    onPassforIndex(item) {
        Alert.alert(item + '')
    }
}